<template>
  <div class="bigBox">
    <!-- 上面俩东西 -->
    <div>
      <el-row>
        <el-col :span="12"><div class="left">
          <div>日销售统计</div>
          <el-row class="ri">
            <el-col :span="8">
              <div>{{ sun.Sales }}</div>
              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="8">
              <div>{{ sun.quota }}</div>
              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="8">
              <div>{{ sun.divide }}</div>
              <span>当日销售量(个)</span>
            </el-col>
          </el-row>
        </div></el-col>
        <el-col :span="12"><div class="right">
          <div>月销售统计</div>
          <el-row class="yue">
            <el-col :span="8">
              <div>{{ moon.Sales }}</div>
              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="8">
              <div>{{ (moon.quota/1000000).toFixed(2) }}</div>
              <span>当日销售量(个)</span>
            </el-col>
            <el-col :span="8">
              <div>{{ moon.divide }}</div>
              <span>当日销售量(个)</span>
            </el-col>
          </el-row>
        </div></el-col>
      </el-row>
    </div>
    <!-- 内容部分 -->
    <div class="body">

      <!-- 搜索区域 -->
      <!-- 搜索 -->
      <div class="search">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="合作商">
            <el-select v-model="value" placeholder="请选择活动区域">
              <el-option v-for="(item,index) in Partners" :key="index" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期: ">
            <div class="block">
              <el-date-picker
                v-model="dataValue"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="onSubmit"
            >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 文字 -->
      <div class="txt">
        <div> 笔数统计:<span>{{ moon.Sales }}</span>个 </div>
        <div> 收入统计:<span>{{ moon.quota/100 }}</span>个 </div>
        <div> 分成统计:<span>{{ moon.divide/100 }}</span>个 </div>
      </div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="订单日期"
          width="280"
        />
        <el-table-column
          prop="ownerName"
          label="合作商"
          width="280"
        />
        <el-table-column
          prop="ratio"
          label="分成比例"
          width="280"
        />
        <el-table-column
          prop="orderTotalMoney"
          label="收入(元)"
          width="280"
        />
        <el-table-column
          prop="orderCount"
          label="笔数"
          width="280"
        />
        <el-table-column
          prop="totalBill"
          label="分成金额(元)"
          width="280"
        />
      </el-table>
      <!-- 底部 -->
      <!-- 底部 -->
      <div>
        <el-row>
          <el-col
            :span="18"
          >共{{ complete.totalCount }}条记录 第 {{ complete.pageIndex }}/{{ complete.totalPage }} 页
            <div
              class="grid-content bg-purple"
            /></el-col>
          <el-col :span="6">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                @click="up"
              >上一页</el-button>
              <el-button
                type="primary"
                @click="under"
              >下一页<i

                class="el-icon-arrow-right el-icon--right"
              /></el-button>
            </el-button-group>
            <div
              class="grid-content bg-purple-light"
            /></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { Partners, summarizeList, rangeOrder, income, divideApi } from '@/api'
export default {
  data() {
    return {
      // 日销售的数据
      sun: {
        Sales: '', // 销售量
        quota: '', // 销售额
        divide: '' // 分成
      },
      moon: {
        Sales: '', // 销售量
        quota: '', // 销售额
        divide: '' // 分成
      },
      Partners: [], // 合作商列表
      value: '',
      dataValue: [`2022-${new Date().getMonth() + 1}-01`, moment(new Date()).format('YYYY-MM-DD')],
      tableData: [],
      complete: {} // 完整数据
    }
  },
  async created() {
    const { data } = await Partners({ pageIndex: 1, pageSize: 10000 })
    this.Partners = data.currentPageRecords
    // console.log(res)
    this.publicFn(this.dataValue, 1, 10)
    const timer = new Date()
    const time = moment(timer).format('YYYY-MM-DD' + ' HH:mm:ss')
    // timer.getDate()
    // timer.getMonth() + 1
    this.orderCount(`2022-${timer.getMonth() + 1}-${timer.getDate()} 00:00:00`, time)
    this.orderCount(`2022-${timer.getMonth() + 1}-01 00:00:00`, time, 123)
  },
  methods: {
    async orderCount(start, end, num) {
      // 获取一定时间范围之内的订单总数
      const res = await rangeOrder({ start: start, end: end })
      // 获取一定时间范围之内的收入
      const res2 = await income({ start: start, end: end })
      const res3 = await divideApi({ start: start, end: end })
      console.log(res3)
      if (num === 123) {
        this.moon.Sales = res.data
        this.moon.quota = res2.data
        this.moon.divide = res3.data
      } else {
        this.sun.Sales = res.data
        this.sun.quota = res2.data
        this.sun.divide = res3.data
      }
    },
    async publicFn(dataValue, pageIndex, pageSize, partnerName) {
      const res = await summarizeList({ start: dataValue[0], end: dataValue[1], pageIndex: pageIndex, pageSize: pageSize, partnerName: partnerName })
      this.complete = res.data
      this.tableData = res.data.currentPageRecords
      console.log(res)
    },
    onSubmit() {
      // 查询
      this.publicFn(this.dataValue, 1, 10, this.value)
    },
    up() {
      // 上一页
      this.publicFn(this.dataValue, +this.complete.pageIndex - 1, this.complete.pageSize)
    },
    under() {
      // 下一页
      this.publicFn(this.dataValue, +this.complete.pageIndex + 1, this.complete.pageSize)
    }
  }
}
</script>

<style lang="scss" scoped>
.txt{
  padding: 10px;
  div{
    display: inline-block;
    margin-left: 35px;
    span{
      color: red;
      font-size: 20px;
    }
  }
}
.bigBox{
   .body{
    padding: 20px;
    margin-top: 20px;
    background-color: #fff;
  }
  padding: 20px;
  .left{
    // background-color: #e9f3ff;
    min-height: 166px;
    height: calc(25vh - 30px);
    border-radius: 20px;
    background: #e9f3ff;
    background-image: url(''),url(http://likede2-admin.itheima.net/img/day.4272ef60.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    padding: 20px;
    margin-right: 20px;;
  }
  .right{
      // background-color: #e9f3ff;
    min-height: 166px;
    height: calc(25vh - 30px);
    border-radius: 20px;
    // background: #e9f3ff;
    // background-repeat: no-repeat,no-repeat;
    background: #fbefe8 url(http://likede2-admin.itheima.net/img/month.5c71f45f.png) no-repeat calc(100% - 12px) 100%;
    // background-position: 0 0,calc(100% - 12px) 100%;
    padding: 20px;
  }
}
.yue{

    margin-left: 60px;
  div{
    color: #ff5757;
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
            height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
  }
  span{
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #de9690;
    line-height: 17px;
  }
}
.ri{
  margin-left: 60px;
  div{
    color: #072074;
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
            height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
  }
  span{
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #91a7dc;
    line-height: 17px;
  }
}

</style>
